﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.Canvas</title>
    <meta charset="utf-8" />
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/vue.js"></script>
    <script src="http://jquerycanvas.js/Scripts/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="test" style="font-family:'Arial Unicode MS'">
        <v-canvas src="../Images/1.jpg" class="test-class" v-bind:width="getWidth" v-bind:height="getHeight"></v-canvas>
    </div>
    <div class="panel">
        <div class="panel-heading">调整</div>
        <div class="panel-body form-inline">
            <div class="form-group">
                <label for="width" class="control-label">宽度</label>
                <div class="input-group">
                    <input id="width" type="number" class="form-control" value="400" />
                    <span class="input-group-addon">px</span>
                </div>
            </div>
            <div class="form-group">
                <label for="height" class="control-label">高度</label>
                <div class="input-group">
                    <input id="height" type="number" class="form-control" value="150" />
                    <span class="input-group-addon">px</span>
                </div>
            </div>
            <script type="text/javascript">
                $("input").on("keyup",function () {
                    var id = this.id;
                    //id恰好被设置为height\width
                    Vue.set(app, id, parseFloat(this.value));
                })
            </script>
        </div>
    </div>
    <script src="../lib/vue.Canvas.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test"
            , data: {
                width: 400
                , height: 300
            }, computed: {
                getWidth: function () {
                    return [this.width || 400, "px"].join("");
                },
                getHeight: function () {
                    return [this.height || 300, "px"].join("");
                }
            }
        })
    </script>

</body>
</html>